<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-1.10.1.min.js" ></script>
<style id="css">
#wrap{width:200px;height:200px;border:2px solid #000; margin:100px auto; border-radius:50%; position:relative;}
#wrap ul{margin:0;padding:0;height:200px; position:relative; list-style:none;}
#wrap ul li{ width:2px;height:6px;background:#000; position:absolute;left:99px;top:0; transform-origin:center 100px;}
/*#wrap ul li:nth-of-type(1){ transform:rotate(0);}
#wrap ul li:nth-of-type(2){ transform:rotate(6deg);}
#wrap ul li:nth-of-type(3){ transform:rotate(12deg);}
#wrap ul li:nth-of-type(4){ transform:rotate(18deg);}
#wrap ul li:nth-of-type(5){ transform:rotate(24deg);}
#wrap ul li:nth-of-type(6){ transform:rotate(30deg);}
#wrap ul li:nth-of-type(7){ transform:rotate(36deg);}
#wrap ul li:nth-of-type(8){ transform:rotate(42deg);}*/
#wrap ul li:nth-of-type(5n+1){ height:12px;}
#hour{width:6px;height:45px;background:#000; position:absolute;left:97px;top:55px;transform-origin:bottom;}
#min{width:4px;height:65px;background:#999; position:absolute;left:98px;top:35px;transform-origin:bottom;}
#sec{width:2px;height:80px;background:red; position:absolute;left:99px;top:20px;transform-origin:bottom;}
.ico{width:20px;height:20px;background:#000; border-radius:50%; position:absolute;left:90px;top:90px;}
</style>
</head>
<body>
<div id="wrap">
	<ul>
    	<!--<li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>-->
    </ul>
    <div id="hour"></div>
    <div id="min"></div>
    <div id="sec"></div>
    <div class="ico"></div>
</div>
<script>
var sCss="";
for(var i=0;i<60;i++)
{
	$("ul").append($("<li></li>"));
	sCss+="#wrap ul li:nth-of-type("+(i+1)+"){ transform:rotate("+i*6+"deg);}";
}
$("#css").html($("#css").html()+sCss);
toTime();
setInterval(toTime,1000);
function toTime()
{
	var oDate=new Date();
	var iSec=oDate.getSeconds();
	var iMin=oDate.getMinutes()+iSec/60;
	var iHour=oDate.getHours()+iMin/60;
	$("#sec")[0].style.transform="rotate("+iSec*6+"deg)";
	$("#min")[0].style.transform="rotate("+iMin*6+"deg)";
	$("#hour")[0].style.transform="rotate("+iHour*30+"deg)";
};
</script>
</body>
</html>
